<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>匹克官方网店|匹克官方商城 - I CAN PLAY!斗志改未知!</title>
    <link rel="stylesheet" href="../css/index.css" />
    <script src="../js/swiper.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
  </head>

  <body>
    <!-- 引入公共头部 -->
    <div class="header"></div>
    <script type="text/javascript">
      $(".header").load("common/head.html",function(){
            //1.cookie
    var cookie = document.cookie;
    if (cookie) {
      var username= getCookie("lgc");
      if (username) {
        $(".tipsBar").html(
          `<span>欢迎您,${username} | </span><span onclick="exit()">退出</span>`
        );
      }
    }
    
      });
    </script>
    <!-- banner 是视口-->
    <div class="banner">
      <div class="swiper">
          <li><img src="../images/banner1.jpg" alt=""></li>
          <li><img src="../images/banner2.jpg" alt=""></li>
          <li><img src="../images/banner3.jpg" alt=""></li>
          <li><img src="../images/banner4.jpg" alt=""></li>
          <li><img src="../images/banner5.jpg" alt=""></li>
          <li><img src="../images/banner1.jpg" alt=""></li>
      </div>
      <div class="prev">
          <a href="#">
              <img src="../images/icon2.png" alt="" class="black">
              <img src="../images/iconR.png" alt="" class="red">
          </a>
      </div>
      <div class="next">
          <a href="#">
              <img src="../images/icon1.png" alt="" class="black">
              <img src="../images/iconR1.png" alt="" class="red">
          </a>
      </div>
  </div>
  <div class="dot">
      <li class="active"><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
  </div>

    <!-- 主题内容 -->
    <div class="contentbody">
      <!-- 侧边栏aside -->
      <div class="aside">
        <p><img src="../images/icon-s-item1.png" alt="" /></p>
        <p>
          <a href="./shoppingCar.html"
            ><img src="../images/icon-s-item2.png" alt="" />
            <span>购物车</span></a
          >
        </p>
        <p>
          <a href=""
            ><img src="../images/icon-s-item9.png" alt="" /><span
              >优惠券</span
            ></a
          >
          <a href=""
            ><img src="../images/icon-s-item3.png" alt="" /><span
              >我的收藏</span
            ></a
          >
          <a href=""
            ><img src="../images/icon-s-item5.png" alt="" />
            <span>网站客服</span></a
          >
          <img class="totop" src="../images/icon-s-item8.png" alt="" />
        </p>
        <!-- 回到顶部 -->
      </div>

      <!-- 篮球 -->
      <div class="main cl basketball">
        <div class="title">
          <div class="line"></div>
          <div class="word">
            <h2>篮球</h2>
            <span>BASKETBALL</span>
          </div>
        </div>
        <div class="mainBox">
          <div class="pBox">
            <div class="wordBox">
              <p>叫板地心引力</p>
              <p>我的主场我捍卫</p>
              <p>尽管开打，突破到底</p>
              <ul>
                <li>
                  <a href="">帕克系列</a>
                </li>
                <li>
                  <a href="">路威系列</a>
                </li>
                <li>
                  <a href="">外场系列</a>
                </li>
              </ul>
            </div>
          </div>
          <img src="../images/index1.png" alt="" />
        </div>
        <div class="goods cl">
          <div class="local-sub">
            <li><a>热销</a></li>
            <li><a>篮球鞋</a></li>
            <li><a>篮球服</a></li>
          </div>
          <div class="goodsList cl">
            <ul id="list1">
              <li class="onegood">
                <a href="#">
                  <div class="goodsImg">
                    <img
                      src="../images/x1602918145881_3573_x_192_x_192.jpg"
                      alt=""
                    />
                  </div>
                  <p>【吴磊同款】匹克中国力量秋季新款男子篮球背心 DF713001</p>
                </a>
                <div class="price cl">
                  <span>￥159</span>
                  <div class="price1 cl"><span>￥</span><span>199</span></div>
                </div>
              </li>
              <li class="more onegood">
                <h2>查看</h2>
                <p>热销 ></p>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 跑步 -->
      <div class="main cl">
        <div class="title">
          <div class="line"></div>
          <div class="word">
            <h2>跑步</h2>
            <span>RUNNING</span>
          </div>
        </div>
        <div class=" running">
          <div class="pBox">
            <div class="wordBox wz">
              <p>对征途心存敬畏</p>
              <p>向往终点，也尊敬通往终点的征途</p>
              <p>千百次的训练背后，有我撑你</p>
              <ul>
                <li>
                  <a href="">飞织系列</a>
                </li>
                <li>
                  <a href="">减震系列</a>
                </li>
              </ul>
            </div>
          </div>
          <img src="../images/index2.png" alt="" />
        </div>
        <div class="goods">
          <div class="local-sub">
            <li><a>热销</a></li>
            <li><a>跑步鞋</a></li>
            <li><a>运动服</a></li>
          </div>
          <div class="goodsList cl">
            <ul id="list2">
              <li class="onegood">
                <a href="#">
                  <div class="goodsImg">
                    <img
                      src="../images/x1602918145881_3573_x_192_x_192.jpg"
                      alt=""
                    />
                  </div>
                  <p>【吴磊同款】匹克中国力量秋季新款男子篮球背心 DF713001</p>
                </a>
                <div class="price cl">
                  <span>￥159</span>
                  <div class="price1 cl"><span>￥</span><span>199</span></div>
                </div>
              </li>
              <li class="more onegood">
                <h2>查看</h2>
                <p>热销 ></p>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="main cl">
        <div class="title">
          <div class="line"></div>
          <div class="word">
            <h2>综训</h2>
            <span>TRAINING</span>
          </div>
        </div>
        <div class="mainBox training">
          <div class="pBox">
            <div class="wordBox wz">
              <p>极致清爽</p>
              <p>用一套好的装备武装自己</p>
              <p>练一身棒的身材羡煞旁人</p>
              <ul>
                <li>
                  <a href="">男子系列</a>
                </li>
                <li>
                  <a href="">女子系列</a>
                </li>
              </ul>
            </div>
          </div>
          <img src="../images/index4.png" alt="" />
        </div>
        <div class="goods cl">
          <div class="local-sub">
            <li><a>热销</a></li>
            <li><a>新品</a></li>
          </div>
          <div class="goodsList cl">
            <ul id="list3">
              <li class="onegood">
                <a href="#">
                  <div class="goodsImg">
                    <img
                      src="../images/x1602918145881_3573_x_192_x_192.jpg"
                      alt=""
                    />
                  </div>
                  <p>【吴磊同款】匹克中国力量秋季新款男子篮球背心 DF713001</p>
                </a>
                <div class="price cl">
                  <span>￥159</span>
                  <div class="price1 cl"><span>￥</span><span>199</span></div>
                </div>
              </li>
              <li class="more onegood">
                <h2>查看</h2>
                <p>热销 ></p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    <!-- 运动生活 -->
    <div class="main4 cl">
      <div class="title">
        <div class="line"></div>
        <div class="word">
          <h2>运动生活</h2>
          <span>SPORTS LIFE</span>
        </div>
      </div>
      <div class="mainBox sports">
        <div class="pBox">
          <div class="wordBox wz">
            <p>锻炼专造</p>
            <p>简约而不简单的穿搭</p>
            <p>演绎运动潮流生活</p>
            <ul>
              <li>
                <a href="">小白鞋</a>
              </li>
              <li>
                <a href="">卫衣系列</a>
              </li>
            </ul>
          </div>
        </div>
        <img src="../images/index3.png" alt="" />
      </div>
      <div class="goods cl">
        <div class="local-sub">
          <li><a>热销</a></li>
          <li><a>新品</a></li>
        </div>
        <div class="goodsList cl">
          <ul id="list4">
            <li class="onegood">
              <a href="#">
                <div class="goodsImg">
                  <img
                    src="../images/x1602918145881_3573_x_192_x_192.jpg"
                    alt=""
                  />
                </div>
                <p>【吴磊同款】匹克中国力量秋季新款男子篮球背心 DF713001</p>
              </a>
              <div class="price cl">
                <span>￥159</span>
                <div class="price1 cl"><span>￥</span><span>199</span></div>
              </div>
            </li>
            <li class="more onegood">
              <h2>查看</h2>
              <p>热销 ></p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <footer></footer>
    <script>
      $("footer").load(`common/footer.html`);
    </script>
  </body>
  <script>
    //页面数据渲染
    var cookie = document.cookie;
    if (cookie) {
      var username = getCookie("lgc");
    }
    function exit() {
      deleteCookie("lgc");
      location.reload();
    }
    //1.搜索栏
    $(document)
      .on("click", ".searchBtn", function () {
        type = $(".searchCon").val();
        window.location.href=`./goodsList.html?type=${type}`;
      })

    //侧边栏
    window.onscroll = function () {
      if (document.documentElement.scrollTop > 670) {
        document.querySelector(".aside").style.right = 0;
      } else document.querySelector(".aside").style.right = "-40px";
    };
    document.querySelector(".totop").onclick = function () {
      document.documentElement.scrollTop = 0;
    };
  
    //轮播
    var swiperWidth = 1920;//一次移动的距离
    var index = 0;
    var timer = null;

    autoPlay();

    $(".dot li").click(function () {
      index = $(this).index();
      move();
    });

    $(".banner")
      .mouseenter(function () {
        clearInterval(timer);
      })
      .mouseleave(function () {
        autoPlay();
      });

    $(".prev").click(function () {
      if ($(".swiper").is(":animated")) return false;
      index--;
      move();
    });

    $(".next").click(function () {
      if ($(".swiper").is(":animated")) return false;
      index++;
      move();
    });

    function autoPlay() {
      clearInterval(timer);
      timer = setInterval(function () {
        index++;
        move();
      }, 3000);
    }

    function move() {
      if (index < 0) {
        index = $(".dot li").length;
        $(".swiper")
          .stop()
          .css({ left: -swiperWidth * index });
        index--;
      }

      if (index > $(".dot li").length) {
        index = 0;
        $(".swiper").stop().css({ left: 0 });
        index++;
      }
      var activeIndex = index >= $(".dot li").length ? 0 : index;
      $(".dot li")
        .eq(activeIndex)
        .addClass("active")
        .siblings()
        .removeClass("active");

      $(".swiper")
        .stop()
        .animate({ left: -swiperWidth * index }, function () {
          if (index >= $(".dot li").length) {
            $(".swiper").css({ left: 0 });
            index = 0;
          }
        });
    }
    //首页渲染
    
  </script>
</html>
